<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar :viewerSource="viewerSource" />
    <div class="tool-box-left-top">
      <!-- <div class="slider-box-wrapper"><slider-box v-model:value="relativeHeight" :max="10000" /></div> -->
      <!-- <div class="select-box-wrapper"><a-checkbox v-model:checked="shadows">shadows</a-checkbox></div> -->
      <!-- <div class="select-box-wrapper"><select-box :options="sizeOptions" /></div> -->
    </div>
    <div class="tool-box-left-bottom"></div>
    <GlobeRotater showTime :mp="1" :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
  </div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { G3V } from '@g3x';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';
import { g3a_odlines } from '@lib/g3x';

const g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers:[{
    dom: "cesium-viewer",
    name: "viewer1",
    title: "viewer#01",
    viewer:{
      imagery: { type: 'tileImagery', options: { "url": '//zzgis.com/cdn/3d/Assets/Textures/NaturalEarthII', "fileExtension": 'jpg', brightness: 1, show: true } },
      imageryProvider: null,
      // terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
      terrainProvider: null,
      shadows: false,
    },
    layers:[
      // { type: 'tdtIboMap', options: { brightness: 1, show: true } },
      // { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
      { type: 'darkMask', options: { brightness: 1, alpha: 0.85 } },
      { type: 'graticule', options: { brightness: 1, show: true } }
    ],
    globe: {
      // depthTestAgainstTerrain: false,
      // enableLighting: true //启用以太阳为光源的地球
    },
    navigation: {
      // defaultResetView: G3V.defaultViews.global.china.rectangle ,
      defaultResetView: null //flyHome
    },
    hideLayers: false,
  }],
};

export default defineComponent({
  name: 'buslines', // 地球仪
  components: { SelectBox, SliderBar, viewerSettingSidebar, GlobeRotater, MousePosition },
  setup() {
    return {};
  },
  props: {},
  data() {
    return {
      _odlines: undefined,
      g3v: null,
      nowPostion: {}
    };
  },
  computed: {
    viewer() {
      return this.g3v && this.g3v.viewer$1;
    },
    viewerSource() {
      const { viewer } = this;
      return { viewer };
    }
  },
  watch: {},
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {},
  unmounted() {
    this._odlines && this._odlines.destroy();
    this._odlines = 0;
    this.g3v && this.g3v.destroy();
    this.g3v = null;
  },
  methods: {
    initViewer() {
      let vm = this;
      vm.g3v = new G3V(g3vOptions,()=>{
        vm.onViewerInited();
        vm.initEffects();
      });
    },
    onViewerInited() {},
    initEffects() {
      let vm = this;
      const viewer = this.viewer;
      var scene = viewer.scene;

      function loadData(dataFunc) {
        Cesium.Resource.fetchJson('//zzgis.com/cdn/3d/SampleData/earthSDK/odlines/lines-bus.json').then(function(data) {
          var timeDuration = 10.0;
          var moveBaseDuration = 4.0;

          var hStep = 300 / (data.length - 1);

          // var busLines = [].concat.apply([], data.map(function (busLine, idx) {
          var busLines = [];
          data.map(function(busLine, idx) {
            var prevPt;
            var points = [];
            for (var i = 0; i < busLine.length; i += 2) {
              var pt = [busLine[i], busLine[i + 1]];
              if (i > 0) {
                pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
              }
              prevPt = pt;

              // points.push([pt[0] / 1e4, pt[1] / 1e4]);
              var longitude = ((pt[0] / 1e4) * Math.PI) / 180.0;
              var latitude = ((pt[1] / 1e4) * Math.PI) / 180.0;
              // var cart = Cesium.Cartesian3.fromDegrees(longitude, latitude, 100.0);
              points.push([longitude, latitude]);
            }

            busLines.push({
              positions: points,
              color: [Math.random() * 0.5 + 0.5, Math.random() * 0.8 + 0.2, 0.0, 1.0],
              width: 1.0,
              startTime: timeDuration * Math.random(),
              duration: moveBaseDuration + 1.0 * Math.random()
            });
          });

          // var busLinesCount = busLines.length;
          // var busLinesPointsCount = 0;
          // busLines.forEach(function (busLine) {
          //     busLinesPointsCount += busLine.positions.length;
          // });
          // console.log('busLinesCount: ' + busLinesCount);
          // console.log('busLinesPointsCount: ' + busLinesPointsCount);

          // var routePaths = busLines;
          dataFunc(busLines, timeDuration);
        });
      }

      this._earth = viewer;

      this._odlines = new g3a_odlines(viewer);
      this._odlines.translucentPass = false;
      this._odlines.color = [1, 1, 1, 1];

      loadData((data, timeDuration) => {
        this._odlines.timeDuration = timeDuration;
        this._odlines.data = data;
        this._odlines.playing = true;
      });

      // 1.1.3 数据绑定
      // 双向绑定的属性，如果一方发生变化，另一方同样会跟随变化
      // this._fpsUnbind = XE.MVVM.bind(this, 'fps', earth.status, 'fps');
      // this._elapsedTimeUnbind = XE.MVVM.bind(this, 'elapsedTime', earth.status, 'elapsedTime');

      // only for Debug
      window.earth = viewer;
      window.odlines = this._odlines;

      const position = [2.033082406731791, 0.6932973408430964, 25375.718759865656];
      const rotation = [5.907289830535223, -0.907166753023871, 0.00031189810712373145];

      // viewer.camera.position = position;
      // viewer.camera.rotation = rotation;

      viewer.camera.flyHome(3);
      setTimeout(() => {
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(116.96237, 39.11332, 127281),
          orientation: {
            heading: 5.907289830535223,
            pitch: -0.907166753023871,
            roll: 0.00031189810712373145
          }
        });
      }, 4000);
    }
  }
});
</script>

<style lang="less"></style>
